<template>
  <Modal v-model="modal" title="添加人员" :closable="false" :mask-closable="false" :width='400'>
    <template v-slot:footer>
      <div>
        <div style="flex: 1;" />
        <Button @click='onCancel'>取消</Button>
        <Button :loading='loading' type="primary" @click='onImport' :disabled='!tmpFile'>添加人员</Button>
      </div>
    </template>

    <div class="commission">
      <div>
        第一步
      </div>
      <div>
        请选择需添加人员的组织
      </div>
      <div style="margin-top: 10px;" v-if="selectOpt">
        <dt-info ref='select' :info='orgInfo' :options='selectOpt' @change='onChange'></dt-info>
      </div>
      <div>
        第二步
      </div>
      <div>
        请按照数据模板的格式准备需添加的人员信息
      </div>
      <Button style="color: #0066CC;" type='text' @click="onDownload">
        下载人员添加模板
      </Button>
      <div style="margin-top: 10px;">
        第三步
      </div>
      <div>
        请填写好人员信息相关内容
      </div>
      <div style="margin-top: 10px;">
        第四步
      </div>
      <div>
        请上传已填写的“人员添加模板”
      </div>
      <div class="file" style="margin-top: 10px;">
        <div v-if="orgInfo.o2Id">
          <dt-info-edit ref='upload' :option='uploadOpt'></dt-info-edit>
          <span v-if="tmpFile">{{tmpFile.name}}</span>
        </div>
      </div>
    </div>
  </Modal>

</template>

<script>
  // import toolMgr from '@/biz/base/tool.js'
  import ruleOpt from '@/biz/option/rule.js'
  import orgOpt from '@/biz/option/organization'
  import outMgr from '@/biz/user/out'

  export default {
    components: {},
    data() {
      let select = {
        org1: {
          title: '导入事业部',
          key: 'o1Id',
          rules: [ruleOpt.required('请选择导入事业部')],
          data: {
            to: (res) => {
              return { o1: res?.label, o1Id: res?.value }
            }
          }
        },
        org2: {
          title: '导入子公司',
          key: 'o2Id',
          rules: [ruleOpt.required('请选择导入子公司')],
          data: {
            to: (res) => {
              return { o2: res?.label, o2Id: res?.value }
            }
          }
        },
        org3: {
          title: '导入事业处',
          key: 'o3Id',
          data: {
            to: (res) => {
              return { o3: res?.label, o3Id: res?.value }
            }
          }
        }
      }
      let uploadOpt = {
        upload: {
          title: '上传文件',
          api: null,
          show: false,
          format: ['xlsx', 'xls', 'XLS', 'XLSX'],
          formatErr: () => {
            this.loading = false
            this.$Message.error('只支持上传Excel表格！')
          },
          before: (file) => {
            this.tmpFile = file
            return false
          },
        },
        change: (data) => {
          this.loading = false
          let res = data.editValue[data.editValue.length - 1].response
          if (res.code == 200) {
            this.$emit('success')
            this.$Message.info('正在导入体外人员')
            this.onCancel()
          }
        }
      }
      return {
        loading: false,
        modal: false,
        orgInfo: {
          o1Id: null,
          o2Id: null,
          o3Id: null
        },
        uploadOpt,
        tmpFile: null,
        selectOpt: orgOpt.select(select)
      }
    },
    mounted() {

    },
    methods: {
      show() {
        // if (this.$refs.select) {
        //   this.$refs.select.resetFields()
        // }
        this.modal = true
      },
      onCancel() {
        this.orgInfo = {
          o1Id: null,
          o2Id: null,
          o3Id: null
        }
        if (this.$refs.select) {
          this.$refs.select.resetFields()
        }
        this.tmpFile = false
        this.loading = false
        this.modal = false
      },
      onImport() {
        if (this.tmpFile) {
          this.loading = true
          this.$refs.upload.post(this.tmpFile)
        }
      },
      onDownload() {
        this.$refs.select.validate().then(res => {
          if (res) {
            outMgr.downloadTemplate(this.orgInfo)
          } else {
            this.$Message.error('请先选择添加人员所属组织后再下载模板')
          }
        })
      },
      onChange() {
        this.uploadOpt.upload.api = outMgr.importTemplate(this.orgInfo)
      }
    },
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;
  }

  .file {
    display: flex;
    justify-content: space-between;
  }
</style>
